CSS Layout Templates
CSS உடன் சில பதிலளிக்கும் தொடக்க டெம்ப்ளேட்டுகளை நாங்கள் உருவாக்கியுள்ளோம்.
உங்கள் அனைத்து திட்டங்களிலும் அவற்றை மாற்றியமைக்க, சேமிக்க, பகிர்ந்து கொள்ளவும் பயன்படுத்தவும் நீங்கள் சுதந்திரமாக உள்ளீர்கள்.
Header, equal columns and footer:
Header
Equal Column 1
Equal Column 2
Equal Column 3
HTML Structure:
<div class="container">
<header>Header</header>
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<footer>Footer</footer>
</div>Header, unequal columns and footer:
Header
Wide Column (Main Content)
Narrow Column (Sidebar)
HTML Structure:
<div class="container">
<header>Header</header>
<div class="row">
<div class="column main">Main Content</div>
<div class="column sidebar">Sidebar</div>
</div>
<footer>Footer</footer>
</div>CSS for unequal columns:
.row {
display: flex;
}
.main {
flex: 2;
}
.sidebar {
flex: 1;
}Topnav, content and footer:
Home
About
Services
Contact
Main Content Area
This is the main content section of the page.
It expands to fill available space.
HTML Structure:
<div class="container">
<nav class="topnav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<main class="content">
<h1>Main Content</h1>
<p>Page content goes here.</p>
</main>
<footer>Footer</footer>
</div>Sidenav and content:
Side Navigation
- Link 1
- Link 2
- Link 3
- Link 4
Main Content
This layout features a fixed sidebar navigation with a scrollable main content area.
Perfect for admin dashboards and web applications.
HTML Structure:
<div class="container">
<nav class="sidenav">
<h3>Navigation</h3>
<a href="#">Dashboard</a>
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
</nav>
<main class="main-content">
<h1>Welcome</h1>
<p>Main content area.</p>
</main>
</div>CSS for sidenav layout:
.container {
display: flex;
min-height: 100vh;
}
.sidenav {
width: 250px;
background: #f4f4f4;
}
.main-content {
flex: 1;
padding: 20px;
}Jassif Team Spaces
Jassif Team Spaces பற்றி எப்போதாவது கேள்விப்பட்டிருக்கிறீர்களா? இங்கே நீங்கள் புதிதாக உங்கள் வலைத்தளத்தை உருவாக்கலாம் அல்லது ஒரு டெம்ப்ளேட்டைப் பயன்படுத்தலாம்.
Jassif Team Spaces நன்மைகள்:
- கிரெடிட் கார்டு தேவையில்லை
- இலவச ஹோஸ்டிங்
- எளிய வலைத்தள கட்டுமானம்
- பல டெம்ப்ளேட்டுகள்
- குறியீடு திருத்தி
Exercise
பயிற்சி:
பின்வரும் கேள்விக்கு பதிலளிக்கவும்:
சம நெடுவரிசைகளைக் கொண்ட லேஅவுட்டிற்கு எந்த CSS பண்புத்தொகுப்பு பயன்படுத்தப்படுகிறது?